<template>
	<view style="padding: 40rpx 0rpx;">
		<view style="margin: 6rpx;">
			<uni-grid :column="3" :showBorder="false" :square="false">
				<uni-grid-item v-for="(item,index) in laboratoryData" :key="index">
					<view style=" margin: 10rpx; display: flex;justify-content: center;">
						<view v-if="index==current" @click="changeType(index)"
							style="width: 80%;color: #fff;background-color: #569FFD;padding: 20rpx 40rpx;text-align: center;border-radius: 8rpx;font-weight: 700;font-size: 24rpx;">
							{{item.name}}
						</view>
						<view v-else @click="changeType(index)"
							style="width: 80%;color: #569FFD;background-color: #fff;padding: 20rpx 40rpx;text-align: center;border-radius: 8rpx;font-size: 24rpx;">
							{{item.name}}
						</view>

					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view style="margin-left: 40rpx;color: #999;"><uni-icons type="calendar" size="15" color="#999"></uni-icons> {{item.handleTime}}</view>
		<uni-grid :column="6" :showBorder="false" :square="false">
			<view class="content">
				<view class="content-item">
					<image src="../../static/images/0421-16.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>格栅（调节进）</text>
					<text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.grilleIn">{{item.grilleIn}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-17.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>调节池</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.regulatingPoolIn">{{item.regulatingPoolIn}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-18.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>A水解池</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.hydrolysisTankA">{{item.hydrolysisTankA}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-24.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>B水解池</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.hydrolysisTankB">{{item.hydrolysisTankB}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-20.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>改良池A1</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.improvedPoolA1">{{item.improvedPoolA1}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-21.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>改良池B1</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.improvedPoolB1">{{item.improvedPoolB1}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-16.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>A二沉池（滤后）</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.secondaryClarifierA">{{item.secondaryClarifierA}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-23.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>B二沉池（滤后）</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.secondaryClarifierB">{{item.secondaryClarifierB}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-25.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>A高效沉淀池</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.highEfficiencyA">{{item.highEfficiencyA}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-26.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>B高效沉淀池</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.highEfficiencyB">{{item.highEfficiencyB}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-27.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>滤池出水</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.filterWater">{{item.filterWater}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-20.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>臭氧氧化池（滤后）</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.ozonePool">{{item.ozonePool}}</text>
					<text v-else>-</text>
				</view>

				<view class="content-item">
					<image src="../../static/images/0421-17.png" style="width: 40rpx; height: 40rpx;"></image>
					<text>排海池末端</text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text><text></text>
					<text v-if="item.oceanLast">{{item.oceanLast}}</text>
					<text v-else>-</text>
				</view>

			</view>
		</uni-grid>
	</view>
</template>

<script>
	import {
		queryLaboratoryDataByFactorName
	} from "@/api/index"
	export default {
		data() {
			return {
				current: 0,
				item: {},
				laboratoryData: [{
						"name": "COD",
						"value": "CODcr"
					},
					{
						"name": "氨氮",
						"value": "氨氮"
					},
					{
						"name": "总磷",
						"value": "TP"
					},
					{
						"name": "总氮",
						"value": "TN"
					},
					{
						"name": "ph",
						"value": "pH"
					},
					{
						"name": "盐分",
						"value": "盐分"
					}
				],
				form: {}
			}
		},
		onReady() {
			this.changeType(0);
		},
		methods: {
			changeType(e) {
				console.info("--------------", this.laboratoryData[this.current].value)
				this.current = e

				this.form.factorName = this.laboratoryData[this.current].value;

				queryLaboratoryDataByFactorName(this.form).then(response => {
					this.item = response;
					console.info(response)
				})
			}
		}
	}
</script>

<style lang="scss">
	.button-group {
		margin: 20rpx;
		padding: 20rpx;
	}

	.content {
		background-color: #fff;
		margin: 20rpx 40rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		width: 100%;
	}

	.content-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgb(114, 126, 139);
		width: 100%;
		padding: 10px 20rpx;
		color: #757C8C;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 1px solid #E2EEFE;
	}
</style>